<template>
  <div class="set_user">
    <div class="box">
      <P>
        <i class="el-icon-back" title="返回上一级" @click="Upper"></i> 个人信息
      </P>


      <div class="images">
        <div></div>
      </div>
      <div class="information">
        <el-form label-width="80px">
          <el-form-item label="用户名">
            <el-input v-model="PersonalInformation.login" disabled></el-input>
            <label @click="setpassword" class="setPassword">修改密码</label>
          </el-form-item>
          <el-form-item label="角色">
            <el-input disabled v-if="PersonalInformation.role==0" value="创建者"></el-input>
            <el-input disabled v-else-if="PersonalInformation.role==1" value="管理员"></el-input>
            <el-input disabled v-else-if="PersonalInformation.role==2" value="维护员"></el-input>
            <el-input disabled v-else-if="PersonalInformation.role==3" value="运行员"></el-input>
            <el-input disabled v-else-if="PersonalInformation.role==4" value="维修员"></el-input>
          </el-form-item>
          <!-- 0,//创建者
              1,//管理员
              2,//维护员
              3,//运行员
          4;//维修员-->
          <el-form-item label="旧密码" v-show="!readOnly">
            <el-input v-model="password.oldPassword"></el-input>
          </el-form-item>
          <el-form-item label="新密码" v-show="!readOnly">
            <el-input v-model="password.password"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="confirm" v-show="!readOnly">
        <el-button type="primary" @click="ConfirmRevision">确认修改</el-button>
        <el-button type="success" @click="giveUp">放弃修改</el-button>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        data() {
            return {
                PersonalInformation: {

                },
                readOnly: true,
                password: {
                    login: "",
                    userRole: "",
                    password: "",
                    oldPassword: "",
                    path: ""
                }
            }
        },
        mounted() {
            this.user()

        },
        methods: {
            user() {
                const userId = sessionStorage.getItem('userId')
                this.$http.get(`/api/threesuns/user/${userId}`).then(res => {
                    this.PersonalInformation = res.data.data
                    console.log(this.PersonalInformation);

                })
            },
            setpassword() {
                this.readOnly = false
            },
            giveUp() {
                this.password.oldPassword=""
                this.password.password=""
                this.readOnly = true
                this.user()
            },
            ConfirmRevision() {
                const userId = sessionStorage.getItem('userId')
                const userRole = sessionStorage.getItem('userRole')
                this.password.login = this.PersonalInformation.login
                this.password.userRole = userRole
                this.$confirm('是否确定修改密码 修改成功会后退出登录 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.put(`/api/threesuns/user/${userId}`, this.password).then(res => {
                        if (res.data.status == "success") {
                            this.$message.success("修改成功,请重新登录");
                            window.sessionStorage.removeItem("token");
                            setTimeout(() => {
                                this.$router.push("/")
                            }, 500)
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消修改'
                    });
                });

            },
            Upper() {
                this.$router.go(-1)
            }
        }

    }
</script>

<style scoped>
    .set_user {
        width: 100%;
        height: 100%;
        color: #fff;
        background-color: #121212;
    }

    .box {
        width: 400px;
        height: 100%;
        background-color: rgba(0, 0, 0);
        margin: 0 auto;
        overflow: hidden;
        padding-left: 100px;
        padding-right: 100px;
    }

    .box p {
        text-align: center;
        font-size: 26px;
        margin-top: 30px;
    }

    .images {
        margin-top: 50px;
    }

    .images div {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: #fff;
        margin: 0 auto;
    }

    .information {
        margin-top: 50px;
    }

    /deep/ .el-form-item__label {
        text-align: left;
    }

    .confirm {
        text-align: center;
    }

    .el-icon-back {
        float: left;
    }

    .el-icon-back:hover {
        cursor: pointer;
    }
    .setPassword:hover{
        cursor: pointer;
    }
</style>
